import Vue from 'vue'
import VueRouter from 'vue-router'
import CreateArticle from '../views/CreateArticle.vue'
import ListArticle from '../views/ListArticle.vue'
import List from '../views/List.vue'
import articleDetail from '../views/articleDetail.vue'
import Login from '../views/Login.vue'
import Bvue from '../views/Bvue.vue'
import Avue from '../components/Avue.vue'
// import NProgress from 'nprogress';
// import 'nprogress/nprogress.css';
Vue.use(VueRouter)

const routes = [
    { path: '/', redirect: '/login' }, //路由重定向
    {
        path: '/articles',
        name: 'list-article',
        component: ListArticle,
        children: [{ path: '/articles/create', component: CreateArticle },
            { path: '/articles/index', component: List },
            { path: `/articles/edit/:id`, component: CreateArticle, props: true },
        ]
    },
    {
        path: '/articles/detail',
        name: 'articleDetail',
        component: articleDetail
    },
    {
        path: '/articles/create',
        name: 'create-article',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: CreateArticle
    },
    // { path: `/articles/edit/:id`, component: CreateArticle, props: true },
    {
        path: '/articles/avue',
        name: 'avue',
        component: Avue
    },
    {
        path: '/bvue',
        name: 'bvue',
        component: Bvue
    },
    {
        path: '/login',
        name: 'login',
        component: Login
    }
]

const router = new VueRouter({
    routes
})

// router.beforeEach(async(to, from, next) => {
//     NProgress.start();
//     next();
// });
router.beforeEach((to, from, next) => {
    if (to.path === '/login')
        return next()
    const tokenStr = window.localStorage.token
    if (!tokenStr)
        return next('/login')
    next();
});


// router.afterEach(() => {
//     NProgress.done();
// });

export default router